<template>
  <view class="reading-record-page">
    <!-- 标签栏 -->
    <view class="tab-bar">
      <text 
        :class="['tab-item', { active: currentTab === 'read' }]" 
        @click="currentTab = 'read'"
      >已读</text>
      <text 
        :class="['tab-item', { active: currentTab === 'unread' }]" 
        @click="currentTab = 'unread'"
      >未读</text>
      <text 
        :class="['tab-item', { active: currentTab === 'record' }]" 
        @click="currentTab = 'record'"
      >阅读记录</text>
	
    </view>
  <view class="content">
	
	    <view class="read-list" v-if="currentTab === 'read'">
	      <text class="list-title">已读 ({{ readList.length }})</text>
	      <view class="list-item" v-for="(item, index) in readList" :key="index">
	        <view class="avatar" :style="{ backgroundColor: item.avatarBg }">
	          <text class="avatar-text">{{ item.avatarText }}</text>
	        </view>
	        <view class="info">
	          <text class="name">{{ item.name }}</text>
	          <text class="time">{{ item.time }}</text>
	        </view>
	      </view>
	    </view>
	  
	    <!-- 未读列表 -->
	    <view class="unread-list" v-if="currentTab === 'unread'">
	      <text class="list-title">未读 ({{ unreadList.length }})</text>
	      <view 
	        class="list-item" 
	        v-for="(item, index) in unreadList" 
	        :key="index"
	      >
	        <view 
	          class="avatar" 
	          :style="{ backgroundColor: item.avatarBg }"
	        >
	          <text class="avatar-text">{{ item.avatarText }}</text>
	        </view>
	        <view class="info">
	          <text class="name">{{ item.name }}</text>
	          <text class="status unread-status">{{ item.status }}</text>
	        </view>
	      </view>
	    </view>
	  
	    <!-- 阅读记录列表 -->
	    <view class="record-list" v-if="currentTab === 'record'">
	      <text class="list-title">阅读记录 ({{ readingRecords.length }})</text>
	      <view 
	        class="list-item" 
	        v-for="(item, index) in readingRecords" 
	        :key="index"
	      >
	        <view 
	          class="avatar" 
	          :style="{ backgroundColor: item.avatarBg }"
	        >
	          <text class="avatar-text">{{ item.avatarText }}</text>
	        </view>
	        <view class="info">
	          <text class="name">{{ item.name }}</text>
	          <text class="time">{{ item.time }}</text>
	        </view>
	      </view>
	  
	    <view class="pagination">
	      <image class="arrow arrow-left" src="/static/left.svg" mode="aspectFit"></image>
	      <text class="page-info">{{ currentPage }}/{{ totalPage }}</text>
	      <image class="arrow arrow-right" src="/static/right.svg" mode="aspectFit"></image>
	    </view>
	    </view>
	  </view>
  
  </view>
</template>

<script setup>
import { ref } from 'vue';

const readList = ref([
  { 
    name: '吴东泽', 
    time: '2025-06-16 09:50:06', 
    avatarBg: '#DB4437', 
    avatarText: '东泽' 
  },
  { 
    name: '韦杰太', 
    time: '2025-06-16 10:34:35', 
    avatarBg: '#0F9D58', 
    avatarText: '杰太' 
  },
  { 
    name: '梁志刚', 
    time: '2025-06-16 16:59:47', 
    avatarBg: '#4285F4', 
    avatarText: '志刚' 
  }
]);

// 模拟未读数据
const unreadList = ref([
  { 
    name: '梁就', 
    status: '未阅读', 
    avatarBg: '#4285F4', 
    avatarText: '梁就' 
  },
  { 
    name: '涂富刚', 
    status: '未阅读', 
    avatarBg: '#4285F4', 
    avatarText: '富刚' 
  },
  { 
    name: '韦福业', 
    status: '未阅读', 
    avatarBg: '#4285F4', 
    avatarText: '福业' 
  },
  { 
    name: '何静怡', 
    status: '未阅读', 
    avatarBg: '#4285F4', 
    avatarText: '静怡' 
  },
  { 
    name: '黄雅婷', 
    status: '未阅读', 
    avatarBg: '#4285F4', 
    avatarText: '雅婷' 
  },
  { 
    name: '罗庆腾', 
    status: '未阅读', 
    avatarBg: '#4285F4', 
    avatarText: '庆腾' 
  },
  { 
    name: '廖峰宇', 
    status: '未阅读', 
    avatarBg: '#4285F4', 
    avatarText: '峰宇' 
  },
  { 
    name: '黄浇富', 
    status: '未阅读', 
    avatarBg: '#4285F4', 
    avatarText: '浇富' 
  },
  { 
    name: '韦云波', 
    status: '未阅读', 
    avatarBg: '#4285F4', 
    avatarText: '云波' 
  }
]);

const readingRecords = ref([
  { 
    name: '梁志刚', 
    time: '2025-06-16 16:59:47', 
    avatarBg: '#4285F4', 
    avatarText: '志刚' 
  },
  { 
    name: '梁志刚', 
    time: '2025-06-16 16:57:05', 
    avatarBg: '#4285F4', 
    avatarText: '志刚' 
  },
  { 
    name: '韦杰太', 
    time: '2025-06-16 10:34:35', 
    avatarBg: '#0F9D58', 
    avatarText: '杰太' 
  },
  { 
    name: '吴东泽', 
    time: '2025-06-16 09:50:06', 
    avatarBg: '#DB4437', 
    avatarText: '东泽' 
  }
]);

const currentTab = ref('record'); // 默认显示阅读记录
const currentPage = ref(1);
const totalPage = ref(1); // 模拟只有1页数据

// 分页方法
const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--;
  }
};
const nextPage = () => {
  if (currentPage.value < totalPage.value) {
    currentPage.value++;
  }
};

// 返回上一页
const onBack = () => {
  uni.navigateBack();
};
</script>

<style scoped>
/* 页面整体 */
.reading-record-page {
  padding: 15px;
  background-color: #f3f3f3;
  min-height: 100vh;
}

/* 顶部标题栏 */
.header {
  display: flex;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #f5f5f5;
}
.back-arrow {
  font-size: 20px;
  color: #333;
  margin-right: 8px;
}
.title {
  font-size: 17px;
  font-weight: bold;
  color: #333;
}


.tab-bar {
  display: flex;
  margin: 0px 15px;
  border-radius: 4px;
  overflow: hidden;
  background-color: #fff;
  padding-bottom: 10rpx;
  border-top-right-radius: 12rpx;
  border-top-left-radius: 12rpx;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  color: #333;
  font-size: 16px;
  font-weight: bold;
}
.tab-item.active {
  background-color: #007aff;
  color: #fff;
}

/* 内容区域通用样式 */
.content {
  padding: 0 15px;
  display: block;
  border-radius: 10rpx;
}
.list-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}
.list-item {
  display: flex;
  align-items: center;
  margin-top: 40rpx;
}
.avatar {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 16px;
  margin-right: 12px;
}
.avatar-text{
	font-size: 36rpx;
	font-weight: bold;
}
.info {
  display: flex;
  flex-direction: column;
}
.name {
  font-size: 18px;
  color: #333;
  margin-bottom: 2px;
  font-weight: bold;
}
.time {
  font-size: 16px;
  color: #999;
  
}

.read-list{
	background-color: #FFFFFF;
	padding: 20rpx;
	border-bottom-left-radius: 12rpx;
	border-bottom-right-radius: 12rpx;
}

.unread-list{
	background-color: #FFFFFF;
	padding: 20rpx;
}
/* 未读列表专属样式 */
.unread-status {
  color: #f00; /* 未读状态标红 */
  
}


.record-list{
	background-color: #FFFFFF;
	padding: 20rpx;
	border-bottom-left-radius: 15rpx;
	border-bottom-right-radius: 15rpx;
}


/* 分页（阅读记录用） */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 15px 0;
}
.page-btn {
  padding: 4px 12px;
  margin: 0 8px;
  border: 1px solid #eee;
  border-radius: 4px;
  background-color: #fff;
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  padding: 8px 16px;
  margin: 15px 0;
  
}

.page-info {
  margin: 0 1px;
  font-size: 16px;
  color: #333333;
  font-weight: normal;
}

.arrow {
  width: 24px;
  height: 24px;
  margin: 0 4px;
  opacity: 0.5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrow-left {
  margin-left: 18px;
  background-color: #ccc; /* 为箭头添加背景色以便显示位置 */
}

.arrow-right {
  margin-right: 18px;
  background-color: #ccc; /* 为箭头添加背景色以便显示位置 */
}



</style>